<script lang="ts" setup>
import dayjs from 'dayjs'

defineOptions({
  name: 'AppRecord',
})
const today = dayjs()
const { isLogin } = storeToRefs(useAppStore())
const {
  list: records,
  runAsync: runAsyncGetRecordAsync,
  page,
  page_size,
  total,
  loading,
  resetPage,
} = useList(ApiMemberVipBonusRecord, {
  ready: isLogin,
}, { page_size: 10 })

const { runAsync: runAsyncVipPrizeConfig } = useRequest(ApiMemberVipPrizeConfig, {
  // onSuccess(data) {
  //   if (data) {
  //     const nav = data.nav
  //     const _options: {
  //       [t: string]: { label: string; value: string }
  //     } = {
  //       819: { label: t('vip_day_salary_bonus'), value: '819' },
  //       820: { label: t('vip_week_salary_bonus'), value: '820' },
  //       821: { label: t('vip_month_salary_bonus'), value: '821' },
  //     }
  //     for (const key in nav) {
  //       if (nav[key] && _options[key])
  //         typeOptions.value.push(_options[key])
  //     }
  //   }
  // },
})

const dayType = ref('0')
const bonusType = ref('')

const typeOptions = ref([
  { label: $t('finance_other_tab_all'), value: '' },
  { label: $t('vip_promotion'), value: '818' },
  { label: $t('vip_day_salary_bonus'), value: '819' },
  { label: $t('vip_week_salary_bonus'), value: '820' },
  { label: $t('vip_month_salary_bonus'), value: '821' },
])

const dayOptions = [
  { label: $t('today'), value: '0' },
  { label: $t('last_days_mid', { delta: 7 }), value: '6' },
  { label: $t('last_days_mid', { delta: 30 }), value: '29' },
  { label: $t('last_days_mid', { delta: 90 }), value: '89' },
]
const isDayPop = ref(false)
const isTypePop = ref(false)
const curDay = computed(() => dayOptions.filter(item => item.value === dayType.value)[0].label)
const curType = computed(() => typeOptions.value.filter(item => item.value === bonusType.value)[0].label)
const totalPage = computed(() => Math.ceil(total.value / page_size.value))
const params = computed(() => ({
  page: page.value,
  page_size: page_size.value,
  start_time: today.subtract(+dayType.value, 'day').startOf('day').unix(),
  end_time: today.endOf('day').unix(),
  cash_type: bonusType.value,
}))

const columns = reactive<Column[]>([
  {
    title: $t('time'),
    dataIndex: 'updated_at',
    slot: 'updated_at',
    align: 'center',
    width: '33%',
  },
  {
    title: $t('label_type'),
    dataIndex: 'cash_type',
    slot: 'cash_type',
    align: 'center',
    width: '33%',
  },
  {
    title: $t('amount'),
    dataIndex: 'receive_amount',
    slot: 'receive_amount',
    align: 'center',
    width: '33%',
  },
])

function getCashType(cashType: string) {
  return typeOptions.value.find(item => item.value === cashType.toString())?.label ?? '-'
}
function RenderCustomEmpty() {
  return h('div', null, [h('div', { class: 'w-full text-center' }, $t('nodata_tip')), h('div', { class: 'pl-2.5 text-sm text-text-white-0 font-semibold w-full text-center' }, $t('nodata_action'))])
}

watch(isLogin, (val) => {
  if (val) {
    runAsyncVipPrizeConfig({ cur: '706' })
    runAsyncGetRecordAsync(params.value)
  }
})

onMounted(() => {
  runAsyncVipPrizeConfig({ cur: '706' })
})

useListSearch(params, runAsyncGetRecordAsync, resetPage)
if (isLogin.value) {
  application.allSettled(
    [runAsyncGetRecordAsync(params.value)], // runAsyncVipPrizeConfig({ cur: '706' }),
  )
}
</script>

<template>
  <div class="app-vip-bonus-record">
    <div class="filters justify-start mb-2">
      <div class="w-full mr-4">
        <BaseButton type="none" class="bg-bg-black-3 px-3 border-1 border-[#3A4142] text-xs w-full h-8 font-semibold" @click="isDayPop = true">
          <span class="mr-auto">{{ curDay }}</span>
          <div class="size-5 center rounded-md bg-[#3A4142]">
            <BaseIcon name="uni-arrow-down" class="text-xs" style="--tg-base-icon-color: white" />
          </div>
        </BaseButton>
      </div>
      <div class="w-full">
        <BaseButton type="none" class="bg-bg-black-3 px-3 border-1 border-[#3A4142] text-xs w-full h-8 font-semibold" @click="isTypePop = true">
          <span class="mr-auto">{{ curType }}</span>
          <div class="size-5 center rounded-md bg-[#3A4142]">
            <BaseIcon name="uni-arrow-down" class="text-xs" style="--tg-base-icon-color: white" />
          </div>
        </BaseButton>
      </div>
    </div>
    <BaseTable
      style="font-size: 0.75rem;color: #B3BEC1;"
      :custom-empty-desc="RenderCustomEmpty"
      :loading="loading" :columns="columns" :data-source="records" show-out-load :out-load-height="218"
      class="rounded-sm"
    >
      <template #updated_at="{ record }">
        {{ timeToFormatDay(record.created_at) }}
      </template>
      <template #cash_type="{ record }">
        {{ $t('vip_cash_type', { vip: record.vip, type: getCashType(record.cash_type) }) }}
        <!-- {{ `${record.cash_type === 818 ? (`VIP${record.vip}`) : ''}${getCashType(record.cash_type)}` }} -->
      </template>
      <template #receive_amount="{ record }">
        <div class="center">
          <AppAmount
            :amount="record.receive_amount"
            :currency-type="getCurrencyConfigByCode(record.receive_currency_id).name"
          />
        </div>
      </template>
    </BaseTable>
    <div>
      <BaseBob v-model:show="isDayPop" v-model:selected="dayType" class="text-xs" :header="$t('choice_time')" :option="dayOptions" />
      <BaseBob v-model:show="isTypePop" v-model:selected="bonusType" :header="$t('choice_type')" :option="typeOptions" />
    </div>
    <div v-if="total > 10">
      <BasePagination v-model="page" :total-page="totalPage" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-vip-bonus-record{
  width: 100%;
  overflow: hidden;
  --tg-table-td-padding-x: 0;
  --tg-table-td-padding-y: 0;
  --tg-table-th-padding-x: 0;
  --bc-amount-currency-size: 1rem;
  --tg-app-amount-font-size: 0.75rem;

}
.filters {
  display: flex;
  align-items: center;
}
</style>
